<template>
  <el-row class="min-h-screen">
    <el-col :span="17" class="bg-gradient-to-br from-[#6366f1] to-[#8b5cf6] flex items-center justify-center">
      <div class="text-center px-10">
        <div class="font-bold text-5xl tracking-wider text-white mb-4">
          IIMS食品安全检测数据管理平台
        </div>
        <div class="tracking-wider text-white text-lg mb-8 opacity-90">
          高效 · 精准 · 可追溯的食品安全检测解决方案
        </div>
        <div class="flex justify-center">
          <div class="w-3/4 border-t border-white border-opacity-30 pt-6">
            <p class="text-white text-opacity-80 text-sm">保障食品安全 · 守护公众健康</p>
          </div>
        </div>
      </div>
    </el-col>
    <el-col
        :span="7"
        class="bg-white flex flex-col items-center justify-center shadow-lg"
    >
      <div class="w-full max-w-xs px-4">
        <div class="text-center mb-8">
          <h2 class="font-bold text-2xl text-gray-800 mb-1">欢迎登录</h2>
        </div>

        <div class="flex items-center justify-center my-6 text-gray-400 text-sm">
          <span class="h-px w-10 bg-gray-200"></span>
          <span class="px-2">账号密码登录</span>
          <span class="h-px w-10 bg-gray-200"></span>
        </div>

        <el-form
            ref="formRef"
            :rules="rules"
            :model="form"
            label-position="top"
            size="large"
            class="w-full"
        >
          <el-form-item prop="userName" class="mb-6">
            <el-input
                v-model="form.userName"
                placeholder="请输入用户名"
                class="h-12"
            >
              <template #prefix>
                <el-icon class="text-gray-400">
                  <UserFilled />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="passWord" class="mb-1">
            <el-input
                type="password"
                show-password
                v-model="form.passWord"
                placeholder="请输入密码"
                class="h-12"
            >
              <template #prefix>
                <el-icon class="text-gray-400">
                  <Lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <div class="flex justify-end mb-6">
            <el-link type="primary" :underline="false" class="text-sm">忘记密码?</el-link>
          </div>

          <el-form-item class="mb-4">
            <el-button
                :loading="loading"
                class="w-full h-12 rounded-lg bg-gradient-to-r from-[#6366f1] to-[#8b5cf6] hover:from-[#7c3aed] hover:to-[#6d28d9] text-white font-medium shadow-md"
                type="primary"
                @click="onSubmit"
            >
              登录
            </el-button>
          </el-form-item>

          <div class="text-center text-sm text-gray-500">
            还没有账号?
            <el-link type="primary" :underline="false" @click="onRegister">立即注册</el-link>
          </div>
        </el-form>

        <div class="mt-8 text-center text-xs text-gray-400">
          <p>© 2025 IIMS食品安全检测数据管理平台 版权所有</p>
          <p class="mt-1">版本: v1.1.0</p>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<style>
.min-h-screen {
  min-height: 100vh;
}

.el-form-item__label {
  font-weight: 500;
  color: #4a5568;
  padding-bottom: 4px;
}

.el-input__wrapper {
  border-radius: 8px;
  padding: 0 15px;
}

.el-button {
  transition: all 0.3s ease;
}

.el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.el-link--primary {
  color: #6366f1;
}
.el-link--primary:hover {
  color: #8b5cf6;
}
</style>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { login } from "../api/manager";
import { ElNotification } from "element-plus";
import { useRouter } from "vue-router";
import { setToken, setUser } from "../composables/auth";
import { useStore } from "vuex";
const router = useRouter();

// do not use same name with ref
const form = reactive({
  userName: "",
  passWord: "",
});

const formRef = ref(null);
const loading = ref(false); // 登陆状态
const store = useStore(); // 拿到store实例

// 监听回车登陆
function onKeyUp(e) {
  switch (e.key)   {
    case "Enter": // 回车键
      onSubmit();
      break;
  }
}

// 等待页面加载完成
onMounted(() => {
  // 加载
  document.addEventListener("keyup",   onKeyUp);
});

onBeforeUnmount(() => {
  // 移除监听事件
  document.removeEventListener("keyup",   onKeyUp);
});

const onSubmit = () => {
  formRef.value.validate((valid)   => {
    if (!valid) {
      // 参数验证不通过
      return false;
    }
    loading.value   = true;
    // 参数验证通过，用户登陆
    login(form.userName,   form.passWord)
        .then((res) => {
          console.log(res);
          if (res.code   === 10000) {
            console.log(res.code);
            // 提示成功
            ElNotification({
              title: "用户登陆成功",
              message: "欢迎回来 " + form.userName,
              type: "success",
            });
            // 存储用户token
            setToken(res.data);
            setUser(form.userName);

            router.push("/index");
          } else {
            // 用户登陆失败
            form.passWord   = "";
            ElNotification({
              title: "用户登陆失败",
              message: res.message,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          console.log(err);
          ElNotification({
            title: "请求异常",
            message: err.response.data.msg,
            type: "error",
          });
        })
        .finally(() => {
          loading.value   = false;
        });
  });
};

const rules = {
  userName: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, message: "用户名长度最少为3个字符", trigger: "blur" },
  ],

  passWord: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码长度至少为6个字符", trigger: "blur" },
  ],
};
</script>